<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:insert="~{include :: header('登记工时')}" />
	<th:block th:insert="~{include :: summernote-css}" />
	<th:block th:insert="~{include :: datetimepicker-css}" />
	<th:block th:insert="~{include :: bootstrap-fileinput-css}" />
	<th:block th:insert="~{include :: select2-css}" />
	<link rel="stylesheet" href="/css/pm/issue-detail.css">
	<style>
		fieldset {
		    border: 1px solid #d0d7de;
		    margin: 0;
		    min-width: inherit;
		}	
		legend {
		    display: block;
		    unicode-bidi: isolate;
		    padding-inline: 2px;
		}	
	</style>
</head>
<body>
    <div class="main-content">
        <form id="form-entrie-add" class="form-horizontal">
			<input name="id"  type="hidden"  th:field="${issueInfo.id}" />
			<h4 class="form-header h4">登记工时</h4>
			<fieldset class="tabular">
				<legend>需求属性</legend>
				<div id="all_attributes">
					<div class="row">
						<div class="col-sm-10">
							<div class="form-group" style="padding-left: 10px;">
								<label class="col-sm-2 control-label">主题</label>
								<div class="col-sm-10 info-value-cell">[[${issueInfo.subject}]]</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-10">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">项目</label>
									<div class="col-sm-8 info-value-cell">[[${issueInfo.project.name}]]（[[${issueInfo.project.customerName}]]）</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">跟踪</label>
									<div class="col-sm-6 info-value-cell">[[${issueInfo.tracker.name}]]</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-10">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">状态</label>
									<div class="col-sm-8 info-value-cell"><span class="label status-label" th:classappend="'label-' + ${issueInfo.issueStatus != null ? issueInfo.issueStatus.htmlColor : '52C41A'}">[[${issueInfo.statusName}]]</span></div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">开始日期</label>
									<div class="col-sm-6 info-value-cell">[[${issueInfo.startDate}]]</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-10">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">优先级</label>
									<div class="col-sm-8 info-value-cell"><span class="label priority-label" th:classappend="'label-' + ${issueInfo.priority.listClass}">[[${issueInfo.priorityName}]]</span></div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">计划完成日期</label>
									<div class="col-sm-6 info-value-cell">[[${issueInfo.dueDate}]]</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-10">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">指派给</label>
									<div class="col-sm-8 info-value-cell">[[${issueInfo.assignedToName}]]</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">预计时间</label>
									<div class="col-sm-5 info-value-cell">[[${issueInfo.estimatedHours}]]</div>
									<label style="padding-top: 8px;">小时</label>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-10">
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">类别</label>
									<div class="col-sm-8 info-value-cell">[[${issueInfo.categoryName}]]</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">
									<label class="col-sm-4 control-label">% 进度</label>
									<div class="col-sm-6 info-value-cell">				
										<select name="doneRatio" id="doneRatio" class="form-control">
											<option value="0" th:field="${issueInfo.doneRatio}">0 %</option>
											<option value="10" th:field="${issueInfo.doneRatio}">10 %</option>
											<option value="20" th:field="${issueInfo.doneRatio}">20 %</option>
											<option value="30" th:field="${issueInfo.doneRatio}">30 %</option>
											<option value="40" th:field="${issueInfo.doneRatio}">40 %</option>
											<option value="50" th:field="${issueInfo.doneRatio}">50 %</option>
											<option value="60" th:field="${issueInfo.doneRatio}">60 %</option>
											<option value="70" th:field="${issueInfo.doneRatio}">70 %</option>
											<option value="80" th:field="${issueInfo.doneRatio}">80 %</option>
											<option value="90" th:field="${issueInfo.doneRatio}">90 %</option>
											<option value="100" th:field="${issueInfo.doneRatio}">100 %</option>
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</fieldset>

			<fieldset>
				<legend>登记工时</legend>
				<div class="row">
					<div class="col-sm-10">
						<div class="col-sm-6">
							<div class="form-group">
								<label class="col-sm-4 control-label is-required">耗时</label>
								<div class="col-sm-6">
									<input id="time_entry_hours" name="hours" placeholder="h:mm" class="form-control" type="text" maxlength="11" size="6" pattern="^\d+(:\d{1,2})?$" title="请输入数字或数字:数字格式（如：118 或 118:30）">
								</div>
								<label style="padding-top: 8px;">小时</label>
							</div>
						</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label class="col-sm-4 control-label is-required">活动</label>
							<div class="col-sm-6">
								<select id="activityId" name="activityId" class="form-control">
									<option value="0">--- 请选择 ---</option>
									<option th:each="activitie : ${activitieList}" th:text="${activitie['name']}" th:value="${activitie['id']}"></option>
								</select>
							</div>
						</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-10">
						<div class="form-group" style="padding-left: 10px;">
							<label class="col-sm-2 control-label">注释</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="time_entry_comments" name="comment">
							</div>
						</div>
					</div>
				</div>
			</fieldset>
			<fieldset>
				<legend>说明</legend>
				<div class="row">
					<div class="col-sm-12">
						<div class="ibox-content no-padding">
							<div class="summernote" id="issue_notes"></div>
						</div>
					</div>
				</div>
			</fieldset>
			<fieldset>
				<legend>文件</legend>
				<div class="row">
					<div class="col-sm-12">
						<div class="file-loading">
							<input id="multipleFile" name="files" type="file" multiple>
						</div>
					</div>
				</div>
			</fieldset>
		</form>
    </div>
	<th:block th:insert="~{include :: footer}" />
	<th:block th:insert="~{include :: summernote-js}" />
	<th:block th:insert="~{include :: datetimepicker-js}" />
	<th:block th:insert="~{include :: bootstrap-fileinput-js}" />
	<th:block th:insert="~{include :: select2-js}" />
	<script th:src="@{/js/upload.js}"></script>
	<script>
	    var prefix = ctx + "project/issue";
		// 存储上传的文件信息
		var uploadedFiles = [];
		
		$(document).ready(function () {
		    $('.summernote').summernote({
		        lang: 'zh-CN',
				height: 240
		    });
			
			// 多图上传
			$("#multipleFile").fileinput({
			    uploadUrl: ctx + 'common/uploads',
			    uploadAsync: true,
				showClose: false,
				showUpload: false
			}).on('filebatchselected', function(event, files) {
    // 文件被选择后，自动触发上传 [1,4](@ref)
				$(this).fileinput("upload");
			}).on('fileremoved', function (event, id, index) {
			    $("input[name='" + event.currentTarget.id + "']").val('')
				// 从uploadedFiles数组中删除对应的文件信息
				if (uploadedFiles.length > 0 && index >= 0 && index < uploadedFiles.length) {
				    uploadedFiles.splice(index, 1);
				}
			}).on('fileuploaded', function(event, data, previewId, index) {
				// 文件上传成功后的回调函数
				var rsp = data.response;
				if (rsp) {
					log.info("return urls：" + rsp.urls)
					log.info("reutrn fileNames：" + rsp.fileNames)
					log.info("reutrn newFileNames：" + rsp.newFileNames)
					log.info("return originalFilenames：" + rsp.originalFilenames)
					log.info("return fileSize：" + rsp.fileSize)

					// 保存上传的文件信息
					if (rsp.urls && rsp.fileNames && rsp.newFileNames && rsp.originalFilenames && rsp.fileSize) {
						uploadedFiles.push({
							url: rsp.urls,
							filename: rsp.fileNames,
							diskFilename: rsp.newFileNames,
							originalFilename: rsp.originalFilenames,
							fileSize: rsp.fileSize
						});
					}
				} else {
					console.log("文件上传响应为空");
				}
			});
		});

		$(function() {
			// 初始化table配置以便使用detailTab方法
			var options = {
				detailUrl: prefix + "/{id}",
				modalName: "需求"
			};
			$.table.init(options);
			layui.use('laydate', function(){
			    var laydate = layui.laydate;
				// 获取输入框的当前值作为默认值
				var startDateValue = $('#startDate').val();
				laydate.render({ 
					elem: '#startDate',
					type: 'date'					,
					value: startDateValue || new Date()
				});
				laydate.render({ 
					elem: '#dueDate',
					type: 'date'
				});
				laydate.render({ 
					elem: '#serverExpirDate',
					type: 'date'
				});
		  	});
		})
		
		function submitHandler(){
			if ($.validate.form()) {
				// 验证预计时间格式
				var hours = $('#time_entry_hours').val().trim();
				var activityId = $('#activityId').val().trim();
				if (hours !== '') {
					var pattern = /^\d+(:\d{1,2})?$/;
					if (!pattern.test(hours)) {
						$.modal.alertWarning('耗时时间格式不正确');
						return false;
					}
					if (activityId === '0') {
						$.modal.alertWarning('请选择活动');
						return false;
					}
				}
				if(activityId !== '0'){
					if(hours === ''){
						$.modal.alertWarning('耗时不能为空');
						return false;
					}
				}

				var comments = $('#time_entry_comments').val().trim();
				if (comments !== '') {
					if(hours === ''){
						$.modal.alertWarning('耗时不能为空');
						return false;
					}
					if (activityId === '0') {
						$.modal.alertWarning('请选择活动');
						return false;
					}
				}

				
				var notesHTML = $('#issue_notes').summernote('code');
				var notes = '';
				// 检查是否为空内容（去除HTML标签后检查）
				var notesContent = notesHTML.replace(/<[^>]*>/g, '').trim();
				if (notesContent === '' || notesHTML === '<p><br></p>' || notesHTML === '<p></p>') {
					notes = '';
				} else {
					// 处理base64图片
					processBase64Images(notesHTML, function(processedHTML) {
						notes = processedHTML;
					});
				}
				
				
				var data = $('#form-entrie-add').serializeArray();
				var issueId = $('input[name="id"]').val();
				data.push({"name": "issueId", "value": issueId});
				data.push({"name": "notes", "value": notes});
				data.push({"name": "uploadedFiles", "value": JSON.stringify(uploadedFiles)});
				console.log("提交数据:", JSON.stringify(data))
				
				var topWindow = $(window.parent.document);
				var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-id');
				if(currentId == prefix + "/index"){
					console.log("currentId" + currentId);
					$.modal.loading("数据加载中");
				}else {
					window.parent.$.modal.loading("数据加载中");
				}

				$.operate.save(prefix + "/saveEntrie", data, function(result){
					console.log("保存后跳转");
					if(currentId != prefix + "/index"){
						$.modal.openTab("需求详情", prefix + "/" + issueId, true);
					}
				});
			}
		}
    </script>
</body>
</html>